import router from './router'
import store from './store'
// 引入 进度条
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

// 添加白名单
const whiteList = ['/login', '/404']
// 设置路由守卫
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启 进度条
  console.log('页面跳转的时候会先经过这里 --- 路由守卫')
  console.log('to 去哪里 =>', to)
  console.log('from 从哪来 =>', from)
  // 判断是否有token
  // 有token, 则next() ; 没有.., 则next('/login')
  if (store.state.user.token) {
    console.log('您已经登录~')
    if (to.path === '/login') {
      console.log('您已经登录, 直接去首页吧')
      next('/') // 如果next (指定了路径), 那么页面跳转就不会经过 router.afterEach回调函数
      NProgress.done() // 关闭进度条
    } else {
      console.log('您已经登录, 放行')

      // 触发acitons的函数, 获取用户信息, 存储到vuex
      if (!store.state.user.userInfo.userId) {
      // store.dispatch('模块名/actions中的函数调用')
        await store.dispatch('user/getUserInfo')
      }
      // console.log('后执行这个同步ok')

      next() // 如果next 没有指定路径, 直接放行, 跳转完毕后页会经过 router.afterEach回调函数
    }
  } else {
    // 判断是否是白名单
    console.log('您还没有登录, 请您先登录!!')
    // if (to.path === '/login' || to.path === '/404' )  || 不必要就不用 用下面的方式   ↓
    if (whiteList.includes(to.path)) {
      console.log('您是白名单, 放行~')
      next()
    } else {
      console.log('您没有白名单, 请您先登录!!')
      next('/login')
      NProgress.done() // 关闭进度条
    }
  }
})

// 如何关闭进度条 NProgress.done() ---> 什么时候关闭? 页面跳转完毕后 输入执行
// 怎么确定页面跳转完毕   router.afterEach()  页面跳转完毕的回调函数
router.afterEach(() => {
  console.log('跳转页面一定会经过这里, 添加NProgress.done()')
  NProgress.done()
})
